<template>
    <div v-loading="loading">
        <el-card body-style="padding:10px" class="box-card">
            <!-- 根据type选择 -->
            <el-select v-model="query.only_directly" placeholder="请选择提现状态">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <el-button @click="page=1;init()" size="small" type="primary" style="margin-left: 30px;">搜索</el-button>
        </el-card>
        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-table :data="data" max-height="440px" size="small" style="width: 100%">
                <el-table-column label="ID" prop="id"></el-table-column>
                <el-table-column label="用户名" prop="name"></el-table-column>
                <el-table-column label="头像" prop>
                    <template slot-scope="scope">
                        <el-image class="border" style="width: 50px; height: 50px" :src="scope.row.avatar"
                            :preview-src-list="toArray(scope.row.avatar)">
                        </el-image>
                    </template>
                </el-table-column>

                <el-table-column label="性别" prop="gender">
                    <template slot-scope="scope">
                        <div>{{ scope.row.gender == 0? "未知" : scope.row.gender == 1? "男" : "女"}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="VIP" prop="is_vip">
                    <template slot-scope="scope">
                        <div>{{ scope.row.is_vip ? '是' : '否' }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="分类" prop="labels">
                    <template slot-scope="scope">
                        <el-tag type="success" v-for="(item, index) in scope.row.labels" :key="index"
                            style="margin-right: 10px;">
                            {{
                                item
                            }}
                        </el-tag>
                    </template>
                </el-table-column>

                <el-table-column label="添加时间" sortable prop="created_at"></el-table-column>
                <el-table-column label="操作">

                    <!-- <el-button size="mini" slot="reference" type="success" style="padding: 10px"
                            @click="toDetails(scope.row.id)">详情</el-button> -->

                    <template slot-scope="scope">
                        <UserInfo :user_id="scope.row.id" v-if="scope.row.id"></UserInfo>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 分页组件 -->
        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-pagination :current-page="page" :total="total" @current-change="pageChange" @size-change="sizeChange"
                layout="total, prev, pager, next, sizes" style="margin-top: 8px;" />
        </el-card>
    </div>
</template>
      
<script>
import treeSelect from '@/components/SelectTree/index'
import list from "@/api/bank.json"
import medium from '@/components/medium/index'
import initData from '@/mixins/index'
export default {
    mixins: [initData],
    components: {
        treeSelect,
        medium
    },
    data() {
        return {
            query: {
                only_directly: 0
            },
            value: '',
            options: [
                {
                    value: 0,
                    label: '直属'
                }, {
                    value: 1,
                    label: '全部'
                }
            ],
            typeList: list,
            visible: false,
            loading: false,
            images: [],
        }
    },
    mounted() {
        //this.getworksList()
        this.beforeInit()


    },
    methods: {
        beforeInit() {
            this.url = "/offline/index"
            this.init() //重新请求数据
            console.log("data", this.data)
        },
        selectFun(val) {
            this.query.bank_name = val
        },

        toDetails(id) {
            this.$router.push({ path: "/offline-details?id=" + id });
        },



        toArray(str) {
            const arr = []
            arr.push(str)
            return arr
        },



        closeBox() {
            this.type = 'create'
            this.visible = false
        },



    },
}
</script>
      
<style lang="scss" scoped>
.butBox {
    background-color: rgb(219, 219, 219);
    border: none;
    color: #555;
}

.flex {
    display: flex;
}
</style>